<template>
	<view class="hotTemplate" v-if="productList.length">
		<view class="evaluateIcon flex-items">
			<image src="../../static/images/img/icon_deo.png"></image>
			<text>热门推荐</text>
			<image style="margin-left: 20upx;" src="../../static/images/img/icon_deo.png"></image>
		</view>
		<view class="recommendList">
			<view class="itemBox" v-for="(item, index) of productList"
				@click="goodsDateils(item.shopId,item.productId,item.skuId)">
				<view class="itemImg">
					<image :src="item.image" class="pic-img default-img"></image>
				</view>
				<div class="product-list-info">
					<label class="product-name">{{item.productName}}</label>
					<view class="labelFlex">
						<view v-for="(yitem,index) in item.style" :key="index">{{yitem}}</view>
					</view>
					<div class="priceWrap">
						<div class="price">
							¥ {{item.price}}
						</div>
<!-- 						<div class="priceWrapIconList">
							<div class="priceWrapIconListItem">
								<image src="../../../static/images/appointment/icon_jd.jpg"></image>
								<div>2折</div>
							</div>
							<div class="priceWrapIconListItem">
								<image src="../../../static/images/appointment/icon_tm.jpg"></image>
								<div>2折</div>
							</div>
							<div class="priceWrapIconListItem">
								<image src="../../../static/images/appointment/icon_wph.png"></image>
								<div>2折</div>
							</div>
						</div> -->
					</div>
					<view class="vipInfoBttom">
						<view>400+评价</view>
						<view>{{item.users?item.users: 0}}付款</view>
					</view>
					<div class="stock">
						库存：123
					</div>
				</div>
<!-- 				<view class="itemTit">{{item.productName}}</view>
				<view class="flex-items shopNameBox">
					<view class="shopName">{{item.shopName}}</view>
					<view class="paymentNum">{{item.users}}人付款</view>
				</view>
				<view class="itemPrice">
					<view class="price">￥{{item.price}}</view>
					<view class="originalPrice">￥{{item.originalPrice}}</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')

	export default {
		data() {
			return {
				listQuery: {
					page: 1,
					pageSize: 5
				},
				productList: []
			}
		},
		created() {
			this.GetremenList()
		},
		methods: {
			// 获取列表数据
			GetremenList() {
				this.listQuery.timestamp = new Date().getTime()
				NET.request(API.GetremenList, this.listQuery, 'get').then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						this.productList = res.data.list
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			//商品详情
			goodsDateils(shopId, productId, skuId) {
				uni.navigateTo({
					url: '/pages_category_page1/goodsModule/goodsDetails?shopId=' + shopId + '&productId=' +
						productId + '&skuId=' +
						skuId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titleFlex{
		display: flex;
		justify-content: center;
		.titleFlexBox{
			display: flex;
			align-items: center;
			image{
				width: 40upx;
				height: 20upx;
			}
			view{
				font-size: 28upx;
				color: #333;
				margin: 0 24upx
			}
		}
	}
	.labelFlex {
		display: flex;
	
		view {
			height: 32upx;
			padding: 0 16upx;
			color: #999;
			background-color: #F4F4F4;
			font-size: 20upx;
			text-align: center;
			line-height: 32upx;
			margin-right: 8upx;
			border-radius: 30upx;
			margin-bottom: 18upx;
		}
	}
	.stock {
		color: #999999;
		font-size: 24upx;
		display: inline-block;
		margin: 8upx 0;
	}
	.vipInfoBttom {
		display: flex;
		justify-content: space-between;
		margin-top: 8upx;
		view {
			font-size: 20upx;
			color: #999999;
		}
	}
	.price {
		font-size: 32upx;
		font-weight: bold;
		color: #EF1414;
	}
	.product-list-info {
		background-color: #FFFFFF;
		//box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
		border-radius: 0 0 10upx 10upx;
		padding: 20upx;
		
		label {
			font-weight: normal;
		}
		
		.product-name {
			font-size: 28upx;
			color: #333;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 18upx;
			line-height: 40upx;
		}
		
		.flex {
			display: flex;
			align-items: center;
		}
		
		.shop-box {
			background-color: #333333;
			border-radius: 0upx 20upx 20upx 0upx;
			line-height: 40upx;
			display: flex;
			align-items: center;
			height: 40upx;
			margin-right: 10upx;
		
			.shop-name {
				font-size: 20upx;
				color: #FFEBC4;
				padding: 0 8upx 0 12upx;
			}
		
			.shop-logo {
				border: 2upx solid #707070;
				border-radius: 50%;
				overflow: hidden;
				float: right;
		
				img {
					width: 34upx;
					height: 34upx;
					display: block;
				}
			}
		}
		
		.buy-count {
			color: #EFB257;
			font-size: 20upx;
			border: 2upx solid #E4E5E6;
			line-height: 40upx;
			padding: 0 5upx;
		}
	}
	.hotTemplate {
		width: 690upx;
		margin: 0 auto;
		padding: 1rpx 0 50rpx 0;

		// background: #efefef;
		.evaluateIcon {
			margin: 30rpx 0 20rpx 0;
			justify-content: center;

			image {
				width: 42rpx;
				height: 20rpx;
				margin-right: 20rpx;
			}
		}

		.recommendList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.itemBox {
				width: 332upx;
				background: #FFFFFF;
				margin-bottom: 24upx;
				background-color: #fff;
				border-radius: 16upx;
				.itemImg {
					width: 100%;
					height: 314rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.itemTit {
					padding: 0 20rpx;
					height: 40rpx;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.shopNameBox {
					padding: 0 20rpx;
					height: 40rpx;
					justify-content: space-between;
					margin-top: 20rpx;

					.shopName {
						color: #FFEBC4;
						font-size: 20rpx;
						width: 140rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 0 20rpx 20rpx 0;
						background: #333333;
						padding-left: 10rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.paymentNum {
						border: 2rpx solid #E4E5E6;
						color: #EFB257;
						font-size: 20rpx;
						padding: 5rpx;
					}
				}

				.itemPrice {
					display: flex;
					align-items: center;
					padding: 0 20rpx 10rpx 20rpx;
					margin-top: 20rpx;

					.price {
						font-size: 40rpx;
						color: #C83732;
						margin-right: 10rpx;
					}

					.originalPrice {
						color: #CCCCCC;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>
